// 铺设页面 => 接口=> 请求
const _getCates = () => {
  getArticleCates(res => {
    // 需要先清空
    $(".layui-table tbody").empty()
    console.log(res);
    const data = res.data.data
    // 创建标签
    // 添加到对应的容器
    data.forEach(obj => {
      let theTr = `<tr>
      <td>${obj.name}</td>
      <td>${obj.alias}</td>
      <td>
        <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`;
      $(".layui-table tbody").append(theTr);
    })
  })
}
_getCates()

// 编辑 操作
// edit
$(".layui-table tbody").on('click', '.edit', function () {
  // 获取当前表单内容
  // Id 文章的id
  let Id = $(this).attr("myid");
  let name = $(this).attr("data-name");
  let alias = $(this).attr("data-alias");
  // debugger
  let index = layer.open({
    type: 1,
    content: edit_str,
    title: "编辑分类",
    area: ['500px', '300px'],
    success() {
      console.log('弹出层成功了');
      // 表单对应的input =>赋值
      // 赋值 =>  
      // form.val('form名字=> lay-filter',{name:xxx,age:xxx})
      // input => val=>
      // name  alias Id 
      form.val('edit',{
        Id,
        name,
        alias
      })

      $('.add-form').on('submit',(e)=>{
        e.preventDefault()
        // 给当前的确认修改注册表单事件 => 获取修改的内容 => 发送请求 => 渲染页面
        let data =  $('.add-form').serialize()
        postUpdateArticle(data,res=>{
          console.log('修改接口',res);
          // 关闭弹窗 
          layer.close(index)
          // 重新渲染页面
          _getCates()
        })
      })
    }
  });




  // let Id = $(this).attr('myid') 
  // getArticleById(Id,res=>{
  //   console.log('res',res);
  //   let {name,Id,alias} = res.data.data
  // })
  // 弹出层

})

// 删除 事件
// 事件委托 => 利用了事件冒泡的机制
// $('css选择器').on('事件类型','筛选器',事件处理函数)
$(".layui-table tbody").on('click', '.delete', function () {
  // Id 文章的id
  let Id = $(this).attr('myid')
  debugger
  getDeleteArticle(Id, res => {
    // 通过当前的删除按钮标签 => 对应的祖先容器 tr => 自爆
    $(this).parents('tr').remove()
  })
})

// 添加类别
$('.add').on('click', () => {
  // 显示弹窗
  let index = layer.open({
    type: 1,
    content: add_str,
    title: "新增分类",
    area: ['500px', '300px'],
    // 2. 因为add-form是在弹出层上
    success() { // 所以必须等弹出层出现以后, 才能 绑定submit事件
      console.log('弹窗成功了', $('.add-form'));
      $('.add-form').on('submit', (e) => {
        e.preventDefault()
        // name=xxx&alias=xxx
        let data = $('.add-form').serialize()
        // 发送添加文章的请求
        postAddCates(data, res => {
          console.log(res);
          // 重新渲染页面
          _getCates()
          // 
          layer.close(index)
        })
      })
    }
  });
})





// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;




// 编辑按钮 - 点击事件
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

